<template>
  <div class="refund">
    <h1 class="title">修改退换货地址</h1>
    <div class="box">
      <div class="wrapper">
        <el-form
          ref="form"
          :model="form"
          label-position="right"
          label-width="120px"
          hide-required-asterisk
        >
          <el-form-item label="退换货地址：" required>
            <el-row>
              <el-col :span="9">
                <el-form-item
                  prop="name"
                  :rules="[{ required: true, message: '请输入收货人姓名', trigger: 'blur' },{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }]"
                >
                  <el-input
                    ref="name"
                    v-model="form.name"
                    placeholder="请输入收货人姓名"
                    tabindex="1"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="14" :offset="1">
                <el-form-item prop="phoneNum" :rules="[{ required: true, message: '请输入收货人电话', trigger: 'blur' }]">
                  <el-input
                    ref="phoneNum"
                    v-model="form.phoneNum"
                    placeholder="请输入收货人电话"
                    tabindex="2"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="addr" class="addr" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
            <el-input
              ref="addr"
              v-model="form.addr"
              placeholder="请输入详细地址"
              tabindex="3"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" tabindex="4" @click="onSubmit">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { updateUser } from '@/api/shop';
export default {
  name: 'RefundAddress',
  data() {
    return {
      form: {
        name: '',
        phoneNum: '',
        addr: ''
      }
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  mounted() {
    this.formatAddr();
  },
  methods: {
    onSubmit() {
      const address = this.form.name + '/' + this.form.phoneNum + '/' + this.form.addr;
      const id = this.shopInfo.id;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          new Promise((resolve, reject) => {
            updateUser({ address, id }).then(res => {
              this.loading = false;
              this.$message({
                message: '修改成功！',
                type: 'success',
                duration: 1000
              });
              this.$store.dispatch('getInfo');
              resolve(res);
            }).catch(error => {
              this.loading = false;
              reject(error);
            });
          });
        } else {
          this.$message({
            message: '请填写信息',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });
    },
    formatAddr() {
      if (this.shopInfo && this.shopInfo.address) {
        const addrArr = this.shopInfo.address.split('/');
        this.form = {
          name: addrArr[0],
          phoneNum: addrArr[1],
          addr: addrArr[2]
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
	.refund{
		font-size: $fontSizeBase;
    color: $textColorDark;
    background-color: #fff;
    .box{
      padding-top: 70px;
      display: flex;
      justify-content: center;
      min-height: calc(100vh - 255px);
		}
		.addr{
			/deep/ .el-input{
				width: 635px;
			}
		}
  }
</style>
